/**
 * 用户特征选择组件
 */

import React from 'react';
import Group from './Group.jsx';
import assign from 'lodash/object/assign';

import filterStyle from './Filter.less';

import Slider from 'material-ui/lib/slider';

import CheckButton from '../../dump/CheckButton.jsx';

const sliderStyle = {
	margin: 0, width: '100%',
	color: 'rgba(0,0,0,0.3)'
}

const noop = function() { }

export default class UserFeatureGroup extends React.Component {
	static propTypes = {
		range: React.PropTypes.string.isRequired,
	};

	static defaultProps = {
		onRangeChange: noop
	};

	constructor(props) {
		super(props);
	}

	// 处理变化
	handleChange = (event, isChecked) => {
		let { onRangeChange } = this.props;
		onRangeChange(event, event.target.value);
	};

	render() {
		let { range } = this.props;

		return (
			<Group name='用户特征'>
				<div className={filterStyle.inline} style={{minWidth: 350}}>
					<CheckButton label='全部(0+)' value='0' checked={range==='0'} onCheck={this.handleChange} />
					<CheckButton label='有效(5+)' value='5' checked={range==='5'} onCheck={this.handleChange} />
					<CheckButton label='核心(20+)' value='20' checked={range==='20'} onCheck={this.handleChange} />
				</div>
			</Group>
		);
	}
}